<template>
    <div id="box">
        <elefocus :dataList="focusList"></elefocus>
        <div class="container">
            <tab>
                <span slot="title">热门推荐</span>
                <template slot="option">
                    <li>华语</li>
                    <li>流行</li>
                    <li>摇滚</li>
                    <li>民谣</li>
                    <li>电子</li>
                </template>
            </tab>
            <div v-if="playList" class="list">
                <info v-for="data in playList" :key="data.id" :data="data"></info>
            </div>
            <tab>
                <span slot="title">新碟上架</span>
            </tab>
            <div class="list"></div>
            <tab>
                <span slot="title">榜单</span>
            </tab>
            <div class="list"></div>
        </div>
    </div>
</template>

<script>
import elefocus from '../components/eleFocus'
import tab from '../components/Tab'
import info from '../components/Info'
import axios from 'axios'

export default {
    beforeMount() {
        axios({
            url: 'https://api.mtnhao.com/banner?type=0',
            method: 'GET',
            withCredentials: false
        }).then(res => {
            this.focusList = res.data.banners;
        })
        axios({
            url: 'https://api.mtnhao.com/personalized?limit=63',
            method: 'GET',
            withCredentials: false
        }).then(res => {
            this.playList = res.data.result;
        })
    },
    data() {
        return {
            focusList: [],
            playList: []
        }
    },
    components: {
        elefocus,
        tab,
        info
    }
}
</script>

<style lang="scss" scoped>
    #box {
        .container {
            width: 1200px;
            padding: 15px;
            margin: 0 auto;
            border: 1px solid #999;
            border-top: none;
            border-bottom: none;

            .list {
                display: flex;
                flex-flow: row wrap;
                justify-content: flex-start;
                align-content: space-around;
                padding: 20px 0 0 4px;
            }
        }
    }
</style>